<template>
  <div class="login_container">
    <div class="login_form">
      <p class="login_title">CRM客户关系管理系统</p>
      <el-form :model="form" :rules="rules" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <!-- 验证码输入框 -->
<!--        <el-form-item prop="captcha">-->
<!--          <div class="captcha">-->
<!--            <el-input class="text" v-model="form.captcha" prefix-icon="Picture" placeholder="请输入验证码"></el-input>-->
<!--            <img :src="captchaImg" @click="GetValidateCode"/>-->
<!--          </div>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" size="medium" @click="Login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import FirstPage from "../pages/FirstPage.vue";

export default {
  name: '',
  data() {
    return {
      form: {
        username: "",
        password: "",
        token: '',
        captcha: '',  //验证数据绑定
        captchaSrc:""
      },
      captchaImg: '',
      dataList: {
        token: ''
      },
      rules: {
        username: [{required: true, message: '请输入账号', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, message: "密码至少为8位", trigger: 'blur'},//密码校验
          {
            pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,}$/,
            message: '密码必须包含至少8位，且有数字、字母和特殊符号'
          }
        ],
        captcha: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 4, message: '验证码长度不正确', trigger: 'blur'}
          // 可以添加更多的验证码校验规则
        ]
      },
    }
  },
  methods: {
    Login() {
      //登录逻辑
      console.log(this.form)
      this.$http.post('/user/login', this.form).then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.dataList.token = res.data.data.token
          //将获取到的token设置到localStorage
          sessionStorage.setItem("token", this.dataList.token)
          //存储token
          this.$router.push("/Home");
        } else {
          this.$message.error("账号或密码错误")
        }
      })
    },
    // GetValidateCode: () => {
    //   this.$http.get('generateValidateCode').then((res)=>{
    //     this.form.captchaSrc = res.data.data.codeKey
    //     this.captchaImg = res.data.data.codeValue
    //     console.log(res.data.data.codeKey)
    //   })
    // }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background-color: rgba(242, 242, 242, 1);
  background-image: url(https://img.zcool.cn/community/01237c5bf51747a80121ab5d5d9a70.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 1278px, 559px;
  background-origin: border-box;
  border: none;
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;

  .login_form {
    width: 400px;
    margin: 0px auto;
    padding: 0px 55px 15px 35px;
    background-color: #fff;
    border: none;
    border-radius: 5px;
    //阴影
    box-shadow: 0px 0px 25px #cac6c6;

    .login_title {
      font-family: '微软雅黑 Blod', '微软雅黑';
      font-weight: 500;
      text-decoration: none;
      color: rgb(0, 121, 154);
      font-size: 32px;
      margin-top: 32px;
      margin-bottom: 32px;
      text-align: center;
    }
  }
;

  .captcha-img {
    cursor: pointer;
    margin-left: 10px; // 与输入框保持一定间距
    height: 36px; // 根据实际情况调整高度
  }
}
</style>
